<template>
    <div class="calculator">
      <!-- 修改：添加 readonly 属性，确保用户不能手动输入 -->
      <input v-model="inputValue" type="text" readonly>
      <div class="buttons">
        <button @click="handleButtonClick('7')">7</button>
        <button @click="handleButtonClick('8')">8</button>
        <button @click="handleButtonClick('9')">9</button>
        <button @click="handleButtonClick('/')">/</button>
        <button @click="handleButtonClick('4')">4</button>
        <button @click="handleButtonClick('5')">5</button>
        <button @click="handleButtonClick('6')">6</button>
        <button @click="handleButtonClick('*')">*</button>
        <button @click="handleButtonClick('1')">1</button>
        <button @click="handleButtonClick('2')">2</button>
        <button @click="handleButtonClick('3')">3</button>
        <button @click="handleButtonClick('-')">-</button>
        <button @click="handleButtonClick('0')">0</button>
        <button @click="handleButtonClick('.')">.</button>
        <button @click="handleButtonClick('=')">=</button>
        <button @click="handleButtonClick('+')">+</button>
        <button @click="clearInput">C</button>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        inputValue: '',
        operator: null,
        firstNumber: null,
        result: null,
        calculationSteps: '' // 新增：用于记录计算步骤
      };
    },
    methods: {
      handleButtonClick(value) {
        if (['+', '-', '*', '/'].includes(value)) {
          if (this.inputValue!== '') {
            if (this.operator) {
              this.calculationSteps += this.inputValue + value;
            } else {
              this.calculationSteps = this.inputValue + value;
            }
            this.inputValue = '';
            this.operator = value;
            this.firstNumber = parseFloat(this.calculationSteps.slice(0, -1));
            this.inputValue = this.calculationSteps; // 更新 input 框显示计算步骤
          }
        } else if (value === '=') {
          if (this.operator && this.firstNumber!== null && this.inputValue!== '') {
            const num2 = parseFloat(this.inputValue.replace(this.calculationSteps, ''));
            this.calculationSteps += this.inputValue.replace(this.calculationSteps, '') + '=';
            this.calculate(this.firstNumber, num2, this.operator);
          }
        } else if (value === 'C') {
          this.clearInput();
        } else {
          // 如果上次计算有结果，清空结果并重新开始输入
            if (this.result!== null) {
            this.clearInput();
          }

          this.inputValue += value;
          if (this.calculationSteps!== '') {
            this.inputValue = this.calculationSteps + this.inputValue.replace(this.calculationSteps, '');
          }
        }
      },
      clearInput() {
        this.inputValue = '';
        this.operator = null;
        this.firstNumber = null;
        this.result = null;
        this.calculationSteps = ''; // 清空计算步骤
      },
      async calculate(num1, num2, operator) {
        try {
          //const response = await fetch('http://192.168.101.124:8080/calculate', {
          const response = await fetch('/calculate', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json'
            },
            body: JSON.stringify({
              num1: num1,
              num2: num2,
              operator: operator
            })
          });
          const data = await response.json();
          this.result = data.result;
          this.inputValue = this.calculationSteps + this.result.toString(); // 显示完整计算过程和结果
          this.operator = null;
          this.firstNumber = null;
          this.calculationSteps = ''; // 计算完成后清空计算步骤
        } catch (error) {
          console.error('计算出错:', error);
        }
      }
    }
  };
  </script>
  
  <style scoped>
  .calculator {
    width: 300px;
    margin: 0 auto;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
  }
  
  .calculator input {
    width: 100%;
    height: 50px;
    font-size: 24px;
    margin-bottom: 10px;
    text-align: right;
  }
  
  .buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px;
  }
  
  .buttons button {
    padding: 10px;
    font-size: 20px;
  }
  </style>